<template>
  <el-row class="app-fill-width" style="overflow-y: auto;">
    <el-col class="px-3" :span="8">
      <div class="py-5 app-h-64px" style="color: #6d6d6d">
        今日数据
      </div>
      <div style="background: #e7e7e7">
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              自营成交客户
            </div>
            <div class="app-font-36 item-value">
              {{ customCountToday }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              自营实收金额
            </div>
            <div class="app-font-36 item-value">
              {{ receiptsToday }}
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              保险成交客户
            </div>
            <div class="app-font-36 item-value">
              0
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              保险绩效金额
            </div>
            <div class="app-font-36 item-value">
              0
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              总成交客户
            </div>
            <div class="app-font-36 item-value">
              {{ customCountToday }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              总金额
            </div>
            <div class="app-font-36 item-value">
              {{ receiptsToday }}
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col class="px-3" :span="8">
      <div class="py-5 app-h-64px" style="color: #6d6d6d">
        本周数据
      </div>
      <div style="background: #e7e7e7">
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              自营成交客户
            </div>
            <div class="app-font-36 item-value">
              {{ customCountWeek }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              自营实收金额
            </div>
            <div class="app-font-36 item-value">
              {{ receiptsWeek }}
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              保险成交客户
            </div>
            <div class="app-font-36 item-value">
              0
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              保险绩效金额
            </div>
            <div class="app-font-36 item-value">
              0
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              总成交客户
            </div>
            <div class="app-font-36 item-value">
              {{ customCountWeek }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              总金额
            </div>
            <div class="app-font-36 item-value">
              {{ receiptsWeek }}
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col class="px-3" :span="8">
      <div class="py-5 app-h-64px" style="color: #6d6d6d">
        本月数据
      </div>
      <div style="background: #e7e7e7">
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              自营成交客户
            </div>
            <div class="app-font-36 item-value">
              {{ customCountOneday }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              自营实收金额
            </div>
            <div class="app-font-36 item-value">
              {{ receiptsOneday }}
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              保险成交客户
            </div>
            <div class="app-font-36 item-value">
              0
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              保险绩效金额
            </div>
            <div class="app-font-36 item-value">
              0
            </div>
          </div>
        </div>
        <div class="app-flex mb-5 pl-5 pb-8" style="background:#f8f8f8">
          <div class="app-col-6">
            <div class="py-5 item-title">
              总成交客户
            </div>
            <div class="app-font-36 item-value">
              {{ customCountOneday }}
            </div>
          </div>
          <div class="app-col-6">
            <div class="py-5 item-title">
              总金额
            </div>
            <div class="app-font-36 item-value">
              {{ receiptsOneday }}
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { getOnedayData,getWeekData,getMonthData } from '@/api/customer'
export default {
  data: () => ({
    isEdit: false,
    role: Number(JSON.parse(localStorage.getItem('userInfo')).role),
    time: null,
    customCountToday: 0,
    receiptsToday: 0,
    customCountWeek: 0,
    receiptsWeek: 0,
    customCountOneday: 0,
    receiptsOneday: 0
  }),
  mounted() {
    this.getOnedayData()
    getWeekData().then(res => {
      if (res.code === 200) {
        this.customCountWeek = res.data.customCount
        this.receiptsWeek = res.data.receipts
      }
    })
    getMonthData().then(res => {
      if (res.code === 200) {
        this.customCountOneday = res.data.customCount
        this.receiptsOneday = res.data.receipts
      }
    })
  },
  methods: {
    getOnedayData() {
      getOnedayData({ time: this.time }).then(res => {
        if (res.code === 200) {
          this.customCountToday = res.data.customCount
          this.receiptsToday = res.data.receipts
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.item-title {
  color: #b7b7b7;
}

.item-value {
  color: #598883
}
</style>
